<template>
    <div class="m-footer">
        <div class="m-footer-item">
            <router-link to="/" exact>
                <div class="iconfont icon-home"></div>
                Home
            </router-link>
        </div>
        <div class="m-footer-item">
            <router-link to="/components">
                <div class="iconfont icon-zujian"></div>
                components
            </router-link>
        </div>
        <div class="m-footer-item">
            <router-link to="/about">
                <div class="iconfont icon-iconset0142"></div>
                about
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "m-footer",
        data () {
            return {

            }
        },
    }
</script>

<style scoped lang="scss">
    .m-footer{
        padding: 15px;
        position: fixed;
        bottom:0;
        left: 0;
        right: 0;
        border-top: 1px solid #eee;
        background: #fff;
        display: flex;
        display: -webkit-flex;
        .m-footer-item{
            flex: 1;
            -webkit-flex: 1;
            text-align: center;
            a.router-link-active{
                color: #25a4bb;
            }
        }
    }
</style>